'use client'

import {useState} from 'react'
import type {ProColumns} from '@ant-design/pro-components'
import {ProTable} from '@ant-design/pro-components'
import {Badge, Button, message, Modal, Progress} from 'antd'
import {PlusOutlined} from '@ant-design/icons'

type InventoryItem = {
  id: string
  productCode: string
  productName: string
  category: string
  quantity: number
  unit: string
  warningThreshold: number
  location: string
  lastCheckTime: string
  status: 'normal' | 'warning' | 'shortage'
}

const getStatusBadge = (status: string) => {
  const statusMap = {
    normal: { status: 'success' as const, text: '正常' },
    warning: { status: 'warning' as const, text: '预警' },
    shortage: { status: 'error' as const, text: '缺货' },
  }
  return statusMap[status as keyof typeof statusMap]
}

const getProgressStatus = (percentage: number) => {
  if (percentage < 20) return 'exception'
  if (percentage < 50) return 'normal'
  return 'success'
}

export default function InventoryPage() {
  const [createModalVisible, setCreateModalVisible] = useState(false)

  const columns: ProColumns<InventoryItem>[] = [
    {
      title: '商品编码',
      dataIndex: 'productCode',
      copyable: true,
      width: 120,
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      width: 180,
    },
    {
      title: '分类',
      dataIndex: 'category',
      width: 120,
    },
    {
      title: '库存数量',
      dataIndex: 'quantity',
      width: 120,
    },
    {
      title: '单位',
      dataIndex: 'unit',
      width: 80,
    },
    {
      title: '预警阈值',
      dataIndex: 'warningThreshold',
      width: 100,
    },
    {
      title: '库存状态',
      dataIndex: 'status',
      width: 120,
      render: (_, record) => {
        const status = getStatusBadge(record.status)
        return <Badge status={status.status} text={status.text} />
      },
    },
    {
      title: '库存水平',
      dataIndex: 'quantity',
      width: 150,
      render: (_, record) => {
        const percentage = Math.min(
          100,
          Math.round((record.quantity / (record.warningThreshold * 2)) * 100)
        )
        return <Progress percent={percentage} status={getProgressStatus(percentage)} size="small" />
      },
    },
    {
      title: '库位',
      dataIndex: 'location',
      width: 120,
    },
    {
      title: '最后盘点时间',
      dataIndex: 'lastCheckTime',
      width: 180,
      valueType: 'dateTime',
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="edit"
          onClick={() => {
            message.info('编辑功能开发中')
          }}
        >
          编辑
        </a>,
        <a
          key="check"
          onClick={() => {
            Modal.confirm({
              title: '确认盘点',
              content: '确定要对这个商品进行盘点吗？',
              onOk: () => {
                message.success('盘点完成')
              },
            })
          }}
        >
          盘点
        </a>,
      ],
    },
  ]

  const mockData: InventoryItem[] = [
    {
      id: '1',
      productCode: 'P001',
      productName: 'iPhone 15 Pro Max',
      category: '电子产品',
      quantity: 50,
      unit: '台',
      warningThreshold: 20,
      location: 'A-01-01',
      lastCheckTime: '2024-03-01 10:00:00',
      status: 'normal',
    },
    {
      id: '2',
      productCode: 'P002',
      productName: '华为平板',
      category: '电子产品',
      quantity: 5,
      unit: '台',
      warningThreshold: 10,
      location: 'A-01-02',
      lastCheckTime: '2024-03-01 10:00:00',
      status: 'warning',
    },
    {
      id: '3',
      productCode: 'P003',
      productName: '小米手机',
      category: '电子产品',
      quantity: 0,
      unit: '台',
      warningThreshold: 15,
      location: 'A-01-03',
      lastCheckTime: '2024-03-01 10:00:00',
      status: 'shortage',
    },
  ]

  return (
    <ProTable<InventoryItem>
      columns={columns}
      dataSource={mockData}
      rowKey="id"
      search={{
        labelWidth: 120,
      }}
      toolBarRender={() => [
        <Button
          key="button"
          icon={<PlusOutlined />}
          type="primary"
          onClick={() => setCreateModalVisible(true)}
        >
          新建
        </Button>,
      ]}
    />
  )
} 